<template>
  <PageWrapper>
    <BasicTable @register="registerTable">
      <template #form-channelCode="{ model, field }">
        <a-tree-select
          v-model:value="model[field]"
          :tree-data="channelTreeData"
          multiple
          allowClear
          :field-names="{
            label: 'channelName',
            value: 'channelCode',
            children: 'children'
          }"
          treeNodeFilterProp="channelName"
          placeholder="请选择渠道名称"
          :maxTagCount="1"
          showCheckedStrategy="SHOW_ALL"
        ></a-tree-select>
      </template>
      <template #tableTitle> </template>
      <template #bodyCell="{ column, record, text }">
        <template v-if="column.dataIndex === 'chargeType'">
          <span v-if="record.chargeType == 'CYCLE'">周期计费</span>
          <span v-else-if="record.chargeType == 'SCORE'">次数计费</span>
          <span v-else>--</span>
        </template>
        <template v-else-if="column.dataIndex === 'payFlag'">
          <span v-if="record.payFlag == '0'">免费</span>
          <span v-else-if="record.payFlag == '1'">付费</span>
          <span v-else>--</span>
        </template>
        <template v-else-if="column.dataIndex === 'likeStatus'">
          <span v-if="record.likeStatus == 'good'">点赞</span>
          <span v-else-if="record.likeStatus == 'bad'">点踩</span>
          <span v-else>--</span>
        </template>
        <template v-else-if="column.dataIndex === 'acontent'">
          <EllipsisTooltip :title="contextMsgFormat(record.acontent)" :width="140" :useHtml="true">
            {{ record.acontent || '--' }}
          </EllipsisTooltip>
        </template>
        <template v-else-if="column.dataIndex === 'sessionDeleted'">
          <span v-if="record.sessionDeleted == '0'">否</span>
          <span v-else-if="record.sessionDeleted == '1'">是</span>
          <span v-else>--</span>
        </template>
        <template v-else-if="column.dataIndex === 'operate'">
          <a-button type="link" class="g-operate-btn" @click="openView(record)"> 详情 </a-button>
        </template>
      </template>
    </BasicTable>
    <ViewDetail @register="viewRegister" />
  </PageWrapper>
</template>

<script lang="ts" setup>
import { reactive, ref, computed, unref, watch, nextTick, onMounted } from 'vue'
import PageWrapper from '@/components/PageWrapper/index.vue'
import { BasicTable, useTable } from '@/components/Table'
import { getSearchFormConfig, getCompanyBasicColums } from './dataSource'
import { operateActionType, operateTxtType, constantMap } from '@/types/enum'
import ViewDetail from './components/ViewDetail.vue'
import { createChannelTree, transformToTree } from '@/utils'
import { message } from 'ant-design-vue'
import { formatToDateTime } from '@/utils/dateUtil'
import EllipsisTooltip from '@/components/EllipsisTooltip/index.vue'
import { md } from '@/utils/markdown'

import api from '@/api'
import { useDrawer } from '@/components/Drawer'

const { chatDetail, queryChannelList } = api

const channelTreeData = ref<any>([])

onMounted(async () => {
  const res = await queryChannelList({ channelRange: '2' })
  channelTreeData.value = transformToTree(res.result)
})

const [viewRegister, { openDrawer: viewOpenDrawer, setDrawerProps }] = useDrawer()
const [registerTable, { reload, setPagination, getForm }] = useTable({
  api: chatDetail,
  columns: getCompanyBasicColums(),
  useSearchForm: true,
  beforeFetch: beforeParamsFetch,
  showIndexColumn: true,
  formConfig: getSearchFormConfig(),
  indexColumnProps: {
    fixed: 'left'
  },
  scroll: { y: constantMap.tableYHeight, x: constantMap.tableXWidth }
})

function beforeParamsFetch(params: any) {
  const { page, channelCode, ...rest } = params

  const { getFieldsValue } = getForm()
  const formData = getFieldsValue()
  const formChannel = formData.channelCode
  let channelCodeSet

  let paramsData = {
    ...rest,
    channelCodeSet,
    page: {
      pageNo: page.pageNo || 1,
      pageSize: page.pageSize || 10
    }
  }
  return paramsData
}
// 查看详情
const openView = (record: any) => {
  let title = '咨询问题详情'
  if (record.phoneNumber) {
    title = `咨询问题详情（手机号：${record.phoneNumber}）`
  }
  setDrawerProps({
    title
  })
  viewOpenDrawer(true, { record })
}
// 对话markdown格式化
const contextMsgFormat = (acontent: string) => {
  let contextMsg = acontent
  if (contextMsg) {
    contextMsg = contextMsg.replace(/\\n/g, '\r\n') // 转化标题
    contextMsg = md.render(contextMsg as string)
  }
  return contextMsg || '--'
}
</script>

<style lang="less" scoped>
:deep(.ant-table-wrapper) {
  overflow-x: hidden;
}
:deep(.ant-table-column-sorters) {
  justify-content: flex-start;
  .ant-table-column-title {
    flex: none;
  }
  .ant-table-column-sorter {
    margin-left: 8px;
  }
}
.time-num {
  color: @primary-color;
}
.flex-package {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .package-number {
    flex: 1;
    margin-left: 8px;
  }
}
</style>
